<template>
	<div class="login-container flex z-10">
		<div class="login-left">
			<div class="login-left-logo">

				<!--  注释编号:django-vue3-admin__index384214: 取消logo的显示-->
        <img :src="logoMini" />

				<div class="login-left-logo-text">

					<!-- 注释编号:django-vue3-admin__index433714:左上角名称显示-->
					<span>明眸</span>
					<!-- <span>{{ getSystemConfig['login.site_title']||getThemeConfig.globalViceTitle }}</span> -->

					<span class="login-left-logo-text-msg">眼科疾病智能诊断系统</span>
				</div>
			</div>
			<div class="login-left-img">
				<img :src="zhimouMain" />
			</div>
			<img :src="loginBg" class="login-left-waves" />
		</div>
		<div class="login-right flex z-10">
			<div class="login-right-warp flex-margin">
				<span class="login-right-warp-one"></span>
				<span class="login-right-warp-two"></span>
				<div class="login-right-warp-mian">

					<!-- 注释编号:django-vue3-admin__index462814:把登陆介面的名称修改为资源管理系统-->
					<!-- <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div> -->
					<div class="login-right-warp-main-title">账号注册</div>


					<div class="login-right-warp-main-form">

							<el-tabs v-model="state.tabsActiveName" @tab-click="handleTabClick">
								<el-tab-pane :label="$t('message.label.one1')" name="accountPassword">
									 <AccountPassword :shared-state="sharedState" :shared-int="sharedIntState"
                                    @update-state="updateSharedState" @update-int="updateSharedIntState"
                                    @switch-tab="switchTab" />
								</el-tab-pane>
								<el-tab-pane :label="$t('message.label.two2')" name="idCard">
									<IdCard :shared-state="sharedState" @switch-tab="switchTab"/>
								</el-tab-pane>
							</el-tabs>

					</div>
				</div>
			</div>
		</div>
		<!-- 注释编号:django-vue3-admin_index122514 -->
		<!-- 功能说明: 取消登陆页面的版本说明 -->

		<!-- <div class="login-authorization">
			<p>Copyright © {{getSystemConfig['login.copyright'] || '2021-2024 django-vue-admin.com'}} 版权所有</p>
			<p class="la-other">
				<a href="https://beian.miit.gov.cn" target="_blank">{{ getSystemConfig['login.keep_record'] ||
					'晋ICP备18005113号-3' }}</a>
				|
				<a :href="getSystemConfig['login.help_url'] ? getSystemConfig['login.help_url'] : 'https://django-vue-admin.com'"
					target="_blank">帮助</a>
				|
				<a
					:href="getSystemConfig['login.privacy_url'] ? getBaseURL(getSystemConfig['login.privacy_url']) : '#'">隐私</a>
				|
				<a
					:href="getSystemConfig['login.clause_url'] ? getBaseURL(getSystemConfig['login.clause_url']) : '#'">条款</a>
			</p>
		</div> -->

		<!-- 注释编号:django-vue3-admin_index122514 -->
	</div>
  <div v-if="siteBg">
		<img :src="siteBg" class="fixed inset-0 z-1 w-full h-full" />
	</div>
</template>

<script setup lang="ts" name="registerIndex">
import { defineAsyncComponent, onMounted, reactive, computed , nextTick} from 'vue';
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo.svg';  //注释编号:django-vue3-admin__index274314:取消登陆左上角的logo导入
import zhimouMain from '/@/assets/register-bg.svg';
import loginBg from '/@/assets/login-bg.svg';
import { SystemConfigStore } from '/@/stores/systemConfig'
import { getBaseURL } from "/@/utils/baseUrl";
// 引入组件
const AccountPassword = defineAsyncComponent(() => import('/src/views/system/register/component/accountPassword.vue'));
const IdCard = defineAsyncComponent(() => import('/src/views/system/register/component/idCard.vue'));
import _ from "lodash-es";
import accountPassword from "/@/views/system/register/component/accountPassword.vue";
import axios from "axios";
import {errorMessage} from "/@/utils/message";
const sharedState = ref({
  username: '',
  password: '',
});
const sharedIntState = ref(1);
const updateSharedState = (newState: { username: string; password: string }) => {
  sharedState.value = { ...sharedState.value, ...newState };
};
const updateSharedIntState = (newIntState: number) => {
  sharedIntState.value = newIntState;
};
// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	tabsActiveName: 'accountPassword',
});
const switchTab = (tabName: string) => {
  state.tabsActiveName = tabName; // 更新当前活跃的标签
};

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
const systemConfigStore = SystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const getSystemConfig = computed(() => {
	return systemConfig.value
})

const siteLogo = computed(() => {
	if (!_.isEmpty(getSystemConfig.value['login.site_logo'])) {
		return getSystemConfig.value['login.site_logo']
	}
	return logoMini
});

const siteBg = computed(() => {
	if (!_.isEmpty(getSystemConfig.value['login.login_background'])) {
		return getSystemConfig.value['login.login_background']
	}
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
const handleTabClick = (tab, event) => {
  if (state.tabsActiveName=== 'idCard') {
    if(sharedIntState.value===0){}
    else{
      if (sharedIntState.value===1) {
        errorMessage('请填写账号');
      }
      else if(sharedIntState.value===2){
        errorMessage('请填写密码');
      }
      else if(sharedIntState.value===3){
        errorMessage('请再次填写密码');
      }
      else if(sharedIntState.value===4) {
        errorMessage('两次密码不一致');
      }
      nextTick(() => {
        state.tabsActiveName = 'accountPassword';
      });
      event.preventDefault();
    }
  }
};
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	background: var(--el-color-white);

	.login-left {
		flex: 1;
		position: relative;
		background-color: rgba(211, 239, 255, 1);
		margin-right: 100px;

		.login-left-logo {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50px;
			left: 80px;
			z-index: 1;
			animation: logoAnimation 0.3s ease;

			img {
				width: 52px;
				height: 52px;
			}

			.login-left-logo-text {
				display: flex;
				flex-direction: column;

				span {
					margin-left: 10px;
					font-size: 16px;
					color: var(--el-color-primary);
				}

				.login-left-logo-text-msg {
					font-size: 12px;
					color: var(--el-color-primary);
				}
			}
		}

		.login-left-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 52%;

			img {
				width: 100%;
				height: 100%;
				animation: error-num 0.6s ease;
			}
		}

		.login-left-waves {
			position: absolute;
			top: 0;
			right: -100px;
		}
	}

	.login-right {
		width: 700px;

		.login-right-warp {
			border: 1px solid var(--el-color-primary-light-3);
			border-radius: 3px;
			width: 500px;
			height: 500px;
			position: relative;
			overflow: hidden;
			background-color: var(--el-color-white);

			.login-right-warp-one,
			.login-right-warp-two {
				position: absolute;
				display: block;
				width: inherit;
				height: inherit;

				&::before,
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
				}
			}

			.login-right-warp-one {
				&::before {
					filter: hue-rotate(0deg);
					top: 0px;
					left: 0;
					width: 100%;
					height: 3px;
					background: linear-gradient(90deg, transparent, var(--el-color-primary));
					animation: loginLeft 3s linear infinite;
				}

				&::after {
					filter: hue-rotate(60deg);
					top: -100%;
					right: 2px;
					width: 3px;
					height: 100%;
					background: linear-gradient(180deg, transparent, var(--el-color-primary));
					animation: loginTop 3s linear infinite;
					animation-delay: 0.7s;
				}
			}

			.login-right-warp-two {
				&::before {
					filter: hue-rotate(120deg);
					bottom: 2px;
					right: -100%;
					width: 100%;
					height: 3px;
					background: linear-gradient(270deg, transparent, var(--el-color-primary));
					animation: loginRight 3s linear infinite;
					animation-delay: 1.4s;
				}

				&::after {
					filter: hue-rotate(300deg);
					bottom: -100%;
					left: 0px;
					width: 3px;
					height: 100%;
					background: linear-gradient(360deg, transparent, var(--el-color-primary));
					animation: loginBottom 3s linear infinite;
					animation-delay: 2.1s;
				}
			}

			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;

				.login-right-warp-main-title {
					height: 130px;
					line-height: 130px;
					font-size: 27px;
					text-align: center;
					letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: var(--el-text-color-primary);
				}

				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;

					.login-content-main-sacn {
						position: absolute;
						top: 0;
						right: 0;
						width: 50px;
						height: 50px;
						overflow: hidden;
						cursor: pointer;
						transition: all ease 0.3s;
						color: var(--el-color-primary);

						&-delta {
							position: absolute;
							width: 35px;
							height: 70px;
							z-index: 2;
							top: 2px;
							right: 21px;
							background: var(--el-color-white);
							transform: rotate(-45deg);
						}

						&:hover {
							opacity: 1;
							transition: all ease 0.3s;
							color: var(--el-color-primary) !important;
						}

						i {
							width: 47px;
							height: 50px;
							display: inline-block;
							font-size: 48px;
							position: absolute;
							right: 1px;
							top: 0px;
						}
					}
				}
			}
		}
	}

	.login-authorization {
		position: fixed;
		bottom: 30px;
		left: 0;
		right: 0;
		text-align: center;

		p {
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
		}

		a {
			color: var(--el-color-primary);
			margin: 0 5px;
		}
	}
}
</style>
